﻿@{
    ViewBag.Title = "Chat";
}
<input type="hidden" id="displayname" />
<div style="height: 80%;">
    <div id="chats" style="width: 80%; float: left;"></div>
    <div id="onlineList" style="width: 19%; float: right; border-left: solid red 2px; height: 100%;">
        <div style="font-size: 20px; border-bottom: double">Online Users</div>
    </div>
</div>
<div style="height: 19%; border-top: double black; background-color: lightgray">
    <div style="float: left; height: 90%; top: 10%; position: relative;">
        <textarea spellcheck="true" id="message" style="width: 625px; height: 80%"></textarea>
    </div>
    <div style="position: relative; top: 30%; float: left;">
        <input type="button" id="sendmessage" value="Send" />
    </div>
    <div style="position: relative; top: 30%; float: left;">
        <select id="users">
            <option value="All">All</option>
        </select>
    </div>
</div>
@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.-->
<script type="text/javascript">
    $(function () {

        var chat = $.connection.chatHub;

        // Get the user name.
        $('#displayname').val(prompt('Enter your name:', ''));
        chat.client.differentName = function (name) {
            // Prompts for different user name
            $('#displayname').val(prompt('Please enter different username:', ''));
            chat.server.notify($('#displayname').val(), $.connection.hub.id);
        };

        chat.client.online = function (name) {
            // Update list of users
            if (name == $('#displayname').val())
                $('#onlineList').append('<div class="border" style="color:red">You: ' + name + '</div>');
            else {
                $('#onlineList').append('<div class="border">' + name + '</div>');
                $("#users").append('<option value="' + name + '">' + name + '</option>');
            }
        };

        chat.client.enters = function (name) {
            $('#chats').append('<div class="border"><i>' + name + ' enters chatroom</i></div>');
            $("#users").append('<option value="' + name + '">' + name + '</option>');
            $('#onlineList').append('<div class="border">' + name + '</div>');
        };
        // Create a function that the hub can call to broadcast chat messages.
        chat.client.broadcastMessage = function (name, message) {
            //Interpret smileys
            message = message.replace(":)", "<img src=\"/emoticons/smile.png\" class=\"smileys\" />");
            message = message.replace(";)", "<img src=\"/emoticons/wink.png\" class=\"smileys\" />");
            message = message.replace(":D", "<img src=\"/emoticons/laugh.png\" class=\"smileys\" />");

            //display the message
            $('#chats').append('<div class="border"><span style="color:blue">' + name + '</span>: ' + message + '</div>');
        };

        chat.client.disconnected = function (name) {
            //Calls when someone leaves the page
            $('#chats').append('<div class="border"><i>' + name + ' leaves chatroom</i></div>');
            $('#onlineList div').remove(":contains('" + name + "')");
            $("#users option").remove(":contains('" + name + "')");
        }

        // Start the connection.
        $.connection.hub.start().done(function () {
            //Calls the notify method of the server
            chat.server.notify($('#displayname').val(), $.connection.hub.id);

            $('#sendmessage').click(function () {
                if ($("#users").val() == "All") {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                }
                else {
                    chat.server.sendToSpecific($('#displayname').val(), $('#message').val(), $("#users").val());
                }
                // Clear text box and reset focus for next comment. 
                $('#message').val('').focus();
            });

        });
    });
    </script>}